<template>
  <div class="security-document-left">
    <group-title lv1="安防中心" lv2="日志管理"/>
    <div class="security-document-l1">
      <div class="security-document-l1-title">
        <category-title filter hasExport title="日志类型" title-sub="log type" @export="exportClick"/>
      </div>
      <div class="timeline-box">
        <!--        <timeline-info />-->
        <info-block :datas="Ldata" :type="pageConfig.type" lv1="今日总数" lv2="日志总数" @change="leftChange"
        ></info-block>
      </div>
    </div>
  </div>
  <div class="security-document-right">
    <div class="search-box">
      <search-bar :style="{ zIndex: 3 }" date placeholder="搜索更多安防事件" @dateChange="dateChange"
                  @search="onSearch"
      />
    </div>
    <div ref="scrollList" class="log-event-box" @scroll="scrollEvent">
      <div class="log-center-title">
        <category-title class="title-details" filter title="日志详情" title-sub="Log details"/>
        <div v-if="pageConfig.type === '2'" class="select">
          <a-select
              ref="select"
              v-model:value="pageConfig.gj_lx"
              :bordered="false"
              allowClear
              placeholder="筛选"
              style="width: 120px"
              @change="getList(false)"
          >
            <!--            @change="handleChange"-->
            <a-select-option v-for="(item,index) in gjlxConfig" :key="index"
                             :value="item.value"
            >
              {{ item.text }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <div class="log-list">
        <LogInfo :datas="leftLog"></LogInfo>
        <LogInfo :datas="rightLog"></LogInfo>
      </div>
    </div>
  </div>
</template>

<script setup>
import {inject, ref} from "vue";
import {gjlxConfig, Ldata} from "./data.js";
import GroupTitle from "@/components/customs/group-title/index.vue";
import CategoryTitle from "@/components/customs/category-title/index.vue";
import SearchBar from "@/components/customs/search-bar/index.vue";
import {reactive} from "@vue/reactivity";
import InfoBlock from "@/components/customs/info-block";
import {LogCount, LogExport, LogList} from "@/common/customs/setting";
import LogInfo from "./components/log-info";
import {onMounted} from "@vue/runtime-core";

const onPageChange = inject("pageChange");
const pageConfig = reactive({
  page: 1,
  page_size: 50,
  total: 0,
  type: "",
  name: "",
  sj: "",
  gj_lx: null,
});

const pageEnd = reactive({
  loading: false,
  isEnd: false,
});
const selectValue = ref();
const scrollList = ref();
// const searchText = ref("");
const leftLog = ref([]);
const rightLog = ref([]);
const smartObject = inject("smartObject");

const getList = async (nextPage = false) => {
  if (!nextPage) {
    pageConfig.page = 1;
    leftLog.value = [];
    rightLog.value = [];
  }
  const api = new LogList();
  api.params({
    ...pageConfig,
    total: undefined,
  });
  await api.send();
  const {data} = await api.getDatas();
  pageConfig.total = data.total;
  let left = [];
  let right = [];
  if (data.data.length) {
    data.data.map((item, index) => {
      index % 2 ? right.push(item) : left.push(item);
    });
  } else {
    leftLog.value = [];
    rightLog.value = [];
  }
  if (nextPage) {
    leftLog.value.push(...left);
    rightLog.value.push(...right);
  } else {
    scrollList.value.scrollTop = 0;
    leftLog.value = left;
    rightLog.value = right;
  }
  pageEnd.loading = false;
  pageEnd.isEnd = pageConfig.page >= data.last_page;
};

const getLeft = async () => {
  const api = new LogCount();
  api.params({
    sj: pageConfig.sj
  });
  await api.send();
  const {data} = await api.getDatas();
  Ldata.value.forEach(i => {
    i.dai = data[`jr${i.key}`];
    i.zong = data[i.key];
  });
};
getLeft();

const onSearch = (text) => {
  pageConfig.page = 1;
  pageConfig.name = text;
  getList();
};

const leftChange = (type) => {
  pageConfig.type = type;
  pageConfig.page = 1;
  getList();
};

const dateChange = (date) => {
  pageConfig.page = 1;
  pageConfig.sj = date ? date.format("YYYY-MM-DD") : "";
  getList();
  getLeft();
};

const scrollEvent = (event) => {
  if (Math.ceil(event.currentTarget.scrollTop + event.currentTarget.clientHeight) >= event.currentTarget.scrollHeight - 30 && !pageEnd.loading) {
    if (!pageEnd.isEnd) {
      pageConfig.page++;
      pageEnd.loading = true;
      getList(true);
    }
  }
};

const exportClick = async () => {
  const {type, name, sj, gj_lx} = pageConfig;
  const api = new LogExport().responseType("blob").params({
    type, name, sj, gj_lx,
  });
  api.timeout(30000);
  await api.send();
  const data = await api.getDatas();
  const blob = new Blob([data], {
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.style.display = "none";
  a.href = url;
  a.download = "日志导出";
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
};
onMounted(() => {
  getList();

});
</script>

<style lang="less" scoped>
@import "@/pages/security-document/index.less";
@import "./index.less";
</style>
